<template>
    <div>
      <table>
        <tr>
          <td>用户名</td>
          <td><input type="text" v-model="username" placeholder="请输入用户名"></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="text" v-model="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <Button @click="submit" color="blue">注册</Button>
            <Button @click="set" color="blue">重置</Button>
          </td>
        </tr>
      </table>
  </div>
</template>

<script>
    export default {
        name: "reg",
      data:function () {
        return{
          username:'',
          password:'',
        }
      },

      mounted() {

      },

      methods:{
          //定义提交事件
          submit:function () {
            //非空验证
            if(this.username === ''){
              alert('请输入账户');
              return false;
            }
            if(this.password === ''){
              alert('请输入密码');
              return false
            }

            //请求后台接口
            this.axios({
              url:'http://127.0.0.1:8000/reg/',
              method:'get',
              params:{username:this.username, password: this.password}
            }).then(res=>{
              if(res.data.message===200){
                alert(res.data.message);
              }else {
                alert(res.data.message);
              }
            })
          },

          set:function () {
            this.username='';
            this.password='';
          }
      }
    }
</script>

<style scoped>

</style>
